<template>
<div style="background-color: #fff;height: 89.8vh;">
  <div id="tool">
    <el-button type="success" @click="newButton">新增</el-button>
    <el-button @click="batchRemove" type="danger">批量删除</el-button>
    <el-button @click="showUpload" type="primary" >导入</el-button>
    <el-button @click="batchOut"  type="primary">导出</el-button>
    <el-divider>
      <el-icon><Search /></el-icon>
    </el-divider>
    <el-row>
          <el-col style="text-align: center" :span="2">角色编号</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.roleNo" />
          </el-col>
          <el-col style="text-align: center" :span="2">角色名</el-col>
          <el-col :span="4">
            <el-input v-model="searchForm.roleName" />
          </el-col>
      <el-col style="text-align: center" :span="2">
        <el-button @click="search" type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <el-icon><Document /></el-icon>
    </el-divider>
  </div>
  <el-table ref="roleTable" :data="roleData" stripe>
    <el-table-column type="selection" width="55" />
      <el-table-column prop="roleNo" label="角色编号" align="center" />
      <el-table-column prop="roleName" label="角色名" align="center" />
    <el-table-column label="操作" align="center"  >
      <template #default="scope">
        <el-button @click="updateButton(scope.row)" type="warning">修改</el-button>
        <el-button @click="removeButton(scope.row.roleNo)" type="danger">删除</el-button>
        <el-button @click="showPower(scope.row.roleNo)" type="primary"  >权限</el-button>
        <el-button @click="showRouter(scope.row.roleNo)" type="primary"  >路由</el-button>

      </template>
    </el-table-column>
  </el-table>
<paging @init="loadTable" v-model:count="count"  v-model:limit="limit"  v-model:page="page"></paging>
</div>

  <el-dialog draggable v-model="roleFormDisplay">
    <role-form @submitRoleForm="submitRoleForm" @closeRoleForm="closeRoleForm" ref="RoleFormView"></role-form>
  </el-dialog>
  <el-dialog draggable v-model="powerDisplay">
    <el-transfer
        :props="{
      key: 'powerNo',
      label: 'powerName',
    }"
        :titles="['全部权限', '现有权限']"
        v-model="checkedPower" :data="powerData" >
      <template #right-footer>
        <el-button @click="savePower">保存</el-button>
      </template>
    </el-transfer>
  </el-dialog>
  <el-dialog draggable v-model="routerDisplay">
    <el-transfer
        :props="{
      key: 'routerNo',
      label: 'routerName',
    }"
        :titles="['全部路由', '有权路由']"
        v-model="checkedRouter" :data="routerData" >
      <template #right-footer>
        <el-button @click="saveRouter">保存</el-button>
      </template>
    </el-transfer>
  </el-dialog>
  <el-dialog draggable v-model="uploadDisplay">
    <upload @batchImport="batchImportRole"></upload>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {
  batchAddRole,
  batchOutRole,
  batchRemoveRole,
  getAllRole,
  getRolePower,
  removeRole,
  searchRole
} from "../../../request/system/RoleApi.js";
import {Document, Search} from "@element-plus/icons-vue";
import RoleForm from "../../../components/form/system/RoleForm.vue";
import {ElMessage} from "element-plus";
import Paging from "../../../components/Paging.vue";
const RoleFormView=ref()
const roleData=ref([])
const page=ref(1)
const limit=ref(10)
const count=ref(0)
const roleFormDisplay=ref(true);
const roleTable=ref()
const powerData=ref([])
const routerData=ref([])
const checkedPower=ref([])
const checkedRouter=ref([])
const powerDisplay=ref(false)
const routerDisplay=ref(false)

import moment from "moment"
import Upload from "../../../components/upload.vue";
import {getAllPower} from "../../../request/system/PowerApi.js";
import {addRolePower} from "../../../request/system/RoleApi.js";
import {addRoleRouter, getAllRouter, getAllRouterAPI, getRoleRouter} from "../../../request/system/RouterApi.js";
const uploadDisplay=ref(true)

const searchForm =reactive({
  roleNo:'',
  roleName:'',
  page:page.value,
  limit:limit.value
})
const loadTable=(newPage,newLimit)=>{
  page.value=newPage
  limit.value=newLimit
  searchForm.page=newPage
  searchForm.limit=newLimit;
  if(searchForm.roleNo==""&&searchForm.roleName==""){
    init()
  }else {
    search()
  }
}
const checkedRole=ref()
const savePower = () => {
   addRolePower(checkedRole.value,checkedPower.value).then(response=>{
     if(response.state==="200"){
       ElMessage.success("保存成功")
       powerDisplay.value=false;checkedPower.value=[]
     }
   })
}
const saveRouter = () => {
  addRoleRouter(checkedRole.value,checkedRouter.value).then(response=>{
    if(response.state==="200"){
      ElMessage.success("保存成功")
      routerDisplay.value=false;checkedRouter.value=[]
    }
  })
}
const showPower=(id)=>{
  powerDisplay.value=true;
  checkedRole.value=id
  getRolePower(id).then(response=>{
    for (let i=0;i<response.data.length;i++){
      checkedPower.value.push(response.data[i].power)
    }

  })
}
const showRouter=(id)=>{
  routerDisplay.value=true;
  checkedRole.value=id
  checkedRouter.value=[]
  getRoleRouter(id).then(response=>{
    for (let i=0;i<response.data.length;i++){
      checkedRouter.value.push(response.data[i].router)
    }
  })
}
const showUpload=()=>{
  uploadDisplay.value=true
}
const search=()=>{
  searchRole(searchForm).then((response)=>{
      roleData.value=response.data
    count.value=response.count
  })
}
const batchImportRole=(files)=>{
  batchAddRole({"roleArray":files}).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("导入成功")
      init();
      uploadDisplay.value=false;
    }
  })
}
const batchOut=()=>{
  let rows=roleTable.value.getSelectionRows()
  if(rows.length>0){
    for (let i = 0; i < rows.length; i++) {
      rows[i]=JSON.stringify(rows[i])
    }
    batchOutRole({roleArray:rows}).then((response)=>{
      const url = window.URL.createObjectURL(new Blob([response]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'Role:'+ moment(new Date()).format("yyyy-MM-DD-HH-mm-ss")+'.xls'); // 指定下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      ElMessage.success("导出成功")
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const batchRemove=()=>{
  let rows=roleTable.value.getSelectionRows()
  if( rows.length>0){
    let id=""
    for (let i = 0; i < rows.length; i++) {
    id+=rows[i].roleNo+","
    }
    id=id.substring(0,id.length-1)
    batchRemoveRole(id).then((response)=>{
      if(response.state=="200"){
        ElMessage.success("删除成功")
        init()
      }
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const init=()=>{
  getAllRole(page.value,limit.value).then(response=>{
  roleData.value=response.data
    count.value=response.count
  })
  getAllPower(1,1000).then(response=>{
    powerData.value=response.data
  })
  getAllRouterAPI().then((response)=>{
    routerData.value=response.data
  })
}
const removeButton=(roleNo)=>{
  removeRole(roleNo).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("删除成功")
      init()
    }
  })
}
const updateButton=(row)=>{
  roleFormDisplay.value=true;
    RoleFormView.value.fillForm(row)
}
const submitRoleForm=()=>{
    roleFormDisplay.value=false;
  init()
}
const closeRoleForm=()=>{
    roleFormDisplay.value=false;
}
const newButton=()=>{
    roleFormDisplay.value=true;
    RoleFormView.value.rest(true)


}
onMounted(()=>{
    roleFormDisplay.value=false
  uploadDisplay.value=false
  init();
})
</script>
<style scoped>
#tool{
  background-color: #fff;
  padding: 10px;
}
</style>
